<template>
  <div class="app-container">
    <div class="queryform">
      <el-form ref="form" :model="form" :rules="rules" label-width="95px">
        <el-form-item label="主账号:" prop="params1">
          <el-input v-model="form.params1" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- <el-form-item label="关联区域:" prop="correlateRegion"> </el-form-item> -->
        <el-form-item label="终端IP:" prop="params2">
          <el-input v-model="form.params2" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="资源IP:" prop="params5">
          <el-input v-model="form.params5" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- <el-form-item label="所属机房:" prop="computer"> </el-form-item> -->
        <el-form-item label="操作时间起:" prop="params3">
          <el-date-picker
            v-model="form.params3"
            value-format="yyyy-MM-dd HH:mm:ss"
            :clearable="false"
            type="datetime"
            placeholder="选择起始日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="操作时间止:" prop="params4">
          <el-date-picker
            v-model="form.params4"
            value-format="yyyy-MM-dd HH:mm:ss"
            :clearable="false"
            type="datetime"
            placeholder="选择截止日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refresh">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mod-result-table">
      <HTable
        ref="table"
        :tableData="tableData"
        :columnConfigs="columnConfigs"
        @selection-change="handleSelectionChange"
        :selectable="false"
        orderable
        v-loading="loading"
        :pages="pagination"
        @page-change="handlePageChange"
        @size-change="handleSizeChange"
      >
        <template slot-scope="{ row }">
          <template v-if="row.name == 'action'">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click="seeDetail(row.row)"
              >详情</el-button
            >
          </template>
          <template v-else-if="row.name == 'time'">
            {{ $getTimeStr(row.row.time) }}
          </template>
        </template>
      </HTable>
    </div>
    <div class="auditForm">
      <!-- <common-info-dialog
      :title="'日志详情'"
      :visible.sync="dialogVisible"
      @cancel="handleClose"
    >
      <common-info-table>
        <common-info-table-cell label="应用名称" width="50%">
          {{ form.applicationValue }}
        </common-info-table-cell>
        <common-info-table-cell label="业务系统" width="50%">
          {{ form.businessName }}
        </common-info-table-cell>
        <common-info-table-cell label="接口">
          {{ url }}
        </common-info-table-cell>
      </common-info-table>
    </common-info-dialog> -->
      <el-dialog
        title="日志详情"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :close-on-click-modal="false"
        top="5vh"
        width="65%"
      >
        <common-info-table class="until">
          <div class="header">用户信息</div>
          <div class="cell">
            <common-info-table-cell
              v-for="(i, index) in userInfo"
              :key="index"
              :label="i.label"
              :width="i.width"
            >
              {{ i.value }}
            </common-info-table-cell>
          </div>
        </common-info-table>
        <common-info-table class="until">
          <div class="header">资源信息</div>
          <div class="cell">
            <common-info-table-cell
              v-for="(i, index) in applyInfo"
              :key="index"
              :label="i.label"
              :width="i.width"
              ><template v-if="i.slot">
                <template v-if="i.slot == 'time'">
                  {{ $getTimeStr(i.value) }}</template
                >
                <template v-else-if="i.slot == 'url'">
                  <div>
                    <common-tooltip-text
                      :content="i.value"
                    ></common-tooltip-text>
                  </div>
                </template>
              </template>
              <template v-else>
                {{ i.value }}
              </template>
            </common-info-table-cell>
          </div>
        </common-info-table>
        <common-info-table class="until">
          <div class="header">操作信息</div>
          <div class="cell">
            <common-info-table-cell
              v-for="(i, index) in actionInfo"
              :key="index"
              :label="i.label"
              :width="i.width"
            >
              <div>
                <common-tooltip-text :content="i.value"></common-tooltip-text>
              </div>
            </common-info-table-cell>
          </div>
        </common-info-table>
        <common-info-table class="until">
          <div class="header">代理信息</div>
          <div class="cell">
            <common-info-table-cell
              v-for="(i, index) in agentInfo"
              :key="index"
              :label="i.label"
              :width="i.width"
            >
              {{ i.value }}
            </common-info-table-cell>
          </div>
        </common-info-table>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleClose">返 回</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import table from "@/mixins/commontable";
import {
  columnConfigs,
  userInfoCon,
  applyInfoCon,
  actionInfoCon,
  agentInfoCon,
} from "./columnConfigs.js";
import {
  addList,
  editList,
  getList,
  delCurRow,
  getDeatil,
} from "@/api/yybl/action.js";
export default {
  components: {},
  mixins: [table], //表格的混入，主要包括表格上通用的方法和数据，比如查询，重置，分页这些功能
  props: {},
  data() {
    let checkTransparency = (rex, value, callback) => {
      // if (!value) {
      //   return callback(new Error('年龄不能为空'));
      // }
      // const rule = new RegExp("^0.\d$");
      const rule = /^0.\d+$/;
      if (rule.test(value) || value == 0 || value == 1) {
        callback();
      } else {
        callback(new Error("透明度范围为0-1"));
      }
    };
    let checkNumber = (rex, value, callback) => {
      // if (!value) {
      //   return callback(new Error('年龄不能为空'));
      // }
      // const rule = new RegExp("^0.\d$");
      const rule = /^\d*$/;
      if (rule.test(value)) {
        callback();
      } else {
        callback(new Error("请输入数字"));
      }
    };
    return {
      columnConfigs,
      dialogVisible: false,
      editFlag: false,
      form: {
        params1: "",
        params2: "",
        params3: "",
        params4: "",
        params5: "",
      },
      rules: {},
      userInfo: [],
      applyInfo: [],
      actionInfo: [],
      agentInfo: [],
      fontOptions: [
        {
          value: "微软雅黑",
          label: "微软雅黑",
        },
        {
          value: "宋体",
          label: "宋体",
        },
        {
          value: "仿宋",
          label: "仿宋",
        },
        {
          value: "黑体",
          label: "黑体",
        },
        {
          value: "楷体",
          label: "楷体",
        },
        {
          value: "等线",
          label: "等线",
        },
      ],
      vpnform: {
        // rotation: new Number(),
        // size: new Number(),
      },
      rulesVpnform: {
        size: [
          { validator: checkNumber, trigger: "blur" },
          // { required: false, message: "大小不能为空" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        rotation: [
          { validator: checkNumber, trigger: "blur" },
          // { required: false, message: "角度不能为空" },
          // { type: "number", message: "角度必须为数字值" },
        ],
        width: [
          { validator: checkNumber, trigger: "blur" },
          // { required: false, message: "大小不能为空" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        height: [
          { validator: checkNumber, trigger: "blur" },
          // { required: false, message: "大小不能为空" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        transparency: [{ validator: checkTransparency, trigger: "blur" }],
      },
      computers: [],
      vpntypes: [],
      curRow: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    // getTimeStr(val) {
    //   if (val) {
    //     return moment(val).format("YYYY-MM-DD HH:mm:ss");
    //   } else {
    //     return val;
    //   }
    // },
    seeDetail(row) {
      console.log(row);
      this.editFlag = false;
      this.$nextTick(() => {
        this.dialogVisible = true;
        this.$refs?.addform?.clearValidate();
      });
      this.$refs?.addform?.clearValidate();
      let params = {
        logId: row.logId,
      };
      getDeatil(params)
        .then((res) => {
          const getInfo = (configs, data) => {
            return configs.map((i) => {
              return {
                ...i,
                value: data[i.value],
              };
            });
          };
          if (res.rescode == 200) {
            const { data } = res;
            this.userInfo = getInfo(userInfoCon, data);
            this.applyInfo = getInfo(applyInfoCon, data);
            this.actionInfo = getInfo(actionInfoCon, data);
            this.agentInfo = getInfo(agentInfoCon, data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    edit(row) {
      this.editFlag = true;
      this.dialogVisible = true;
      this.curRow = row;
      const {
        host,
        content,
        size,
        rotation,
        font,
        color,
        width,
        height,
        transparency,
      } = row;
      this.vpnform = {
        host,
        content,
        size,
        rotation,
        font,
        color,
        width,
        height,
        transparency,
      };
    },
    async handleDelete(row) {
      this.$confirm("此操作将删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let ids;
          if (row) ids = row.watermarkId;
          const res = await delCurRow({
            ids: ids,
          });
          if (res.rescode == "200") {
            this.$message.success("删除成功");
            this.refresh();
          } else this.$message.error(res.msg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitaddForm(val) {
      console.log(val);
      this.$refs["addform"].validate((val) => {
        if (val) {
          console.log("通过校验");
          const {
            host,
            content,
            size,
            rotation,
            font,
            color,
            width,
            height,
            transparency,
          } = this.vpnform;
          let params = {
            host,
            content,
            size,
            rotation,
            font,
            color,
            width,
            height,
            transparency,
          };
          // params.userId = null;
          // params.sharedkey = encode(form.sharedkey);
          if (this.editFlag) {
            params.watermarkId = this.curRow.watermarkId;
            editList(params)
              .then((res) => {
                if (res.rescode == 200) {
                  this.dialogVisible = false;
                  this.$message.success("编辑成功");
                  this.refresh();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            // 调用新增接口
            addList(params)
              .then((res) => {
                if (res.rescode == 200) {
                  this.dialogVisible = false;
                  this.$message.success("新增成功");
                  this.refresh();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        } else {
          console.log("校验失败");
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleSelectionChange() {},
    getparams() {
      let obj = [
        {
          name: "params1",
          prop: "userCode",
        },
        {
          name: "params2",
          prop: "terminalIp",
        },
        {
          name: "params3",
          prop: "startTimeStr",
        },
        {
          name: "params4",
          prop: "endTimeStr",
        },
        {
          name: "params5",
          prop: "serviceIp",
        },
        // {
        //   name: "params3",
        //   prop: "terminalIp",
        // },
      ];
      let params = {};
      obj.forEach((i) => {
        if (params[i.prop] == undefined) {
          const value = this.form[i.name];
          params[i.prop] = value;
        }
      });
      return params;
    },
    refresh() {
      let params = this.getparams();
      this.getlists(getList, params);
    },
    resetForm() {
      this.$refs["form"].resetFields();
      this.refresh();
    },
  },
  created() {
    this.refresh();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
}
::v-deep .el-dialog {
  min-width: 700px;
  max-width: 1100px;
  .until {
    margin-bottom: 10px;

    .header {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
      font-size: 16px;
      background-color: #e0e0e0;
      background-color: #a8a7a7;
      color: #fff;
      border-radius: 5px 5px 0 0;
    }
    .cell {
      // border: 1px solid #eee;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .global-info-table-row-wrap {
        width: 50%;

        // flex-basis: 50%;
        // border-bottom: 1px solid #eee;
      }
      .global-info-table-row-wrap {
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
      }
      // .global-info-table-row-wrap:last-child {
      //   border-radius: 0 0 5px 5px;
      // }
    }
    .until:last-child{
      margin-bottom: 0px;
    }
  }

  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
.queryform {
  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      max-width: 33.3%;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 33.3%;
    }

    // .el-form-item:nth-child(7) {
    //   max-width: 100%;
    //   flex-basis: 100%;
    //   display: flex;
    //   justify-content: end;
    // }
  }
}
</style>
